<template>
    
    <div class="hlist">
        <ul class="ul">
            <li class="liitem" v-for="(l,i) in list" :key="i">
                <router-link :to="{name:'film',params:{filmId:l.filmId}}" class="aitem">
                    <div class="left">
                        <img v-lazy="l.poster" class="leftimg" alt="">
                    </div>
                    <div class="right">
                        <div class="top1 info-col van-ellipsis">
                            <div class="name">{{l.name}}</div>
                            <span class="dd"> {{l.item.name }}</span>
                        </div>
                        <div class="info-col">
                            观众评分: <span class="grade"> {{l.grade}}</span>
                        </div>
                        <div class="info-col ellipsis">
                            主演:<span v-for="(item,index) in l.actors" :key="index">
                                {{item.name}}
                            </span>
                        </div>
                        <div class="info-col">
                            <span class="nation">
                                {{l.nation}}  |
                            </span>
                            <span>
                                {{l.runtime}}分钟
                            </span>
                        </div>
                    </div>
                </router-link>
                <div class="mybtn" 
                
                 @click.stop="gotopage(l)"  :class="type==1?'':'yugou'">{{type=='1'?'购票':'预购' }} </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:{
        list:Array,
        type:String 
    },
    methods:{
        gotopage(item){
            console.log(item)
            this.$router.push({
                name:'film-cinemas',  
                params:{
                    filmId:item.filmId
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.hlist{
    .ul{
        width:100%;
        padding-bottom:48px;
        .liitem{
            width:100%;
            padding:0 15px;
            border-bottom:1px solid #eee;
            background: #fff;
            position: relative;
            .aitem{
                display: flex;
                padding:15px 0; 
                width:100%;
                overflow: hidden;
                .left{
                    width:66px;
                    height:94px;
                    position: relative;
                    margin-right: 10px;
                    .leftimg{
                        width:66px;
                        height:94px;
                    }
                }
                .right{
                    flex:1;
                    flex-shrink: 0;
                    .top1{
                        display: flex;
                        align-items: center;
                        width:100%;
                        .name{
                            max-width: calc(100% - 25px);
                            color: #191a1b;
                            font-size: 16px;
                            height: 22px;
                            line-height: 22px;
                            margin-right: 5px;
                            overflow: hidden;
                            -o-text-overflow: ellipsis;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .dd{
                            font-size: 9px;
                            color: #fff;
                            background-color: #d2d6dc;
                            height: 14px;
                            line-height: 14px;
                            padding: 0 2px;
                            border-radius: 2px;
                        }
                    }
                    .ellipsis {
                        display: block;
                        overflow: hidden;
                        -o-text-overflow: ellipsis;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width:220px;
                    }
                    .info-col{
                        // width: 100%;
                        font-size: 13px;
                        margin-top: 4px;
                        color: #797d82;
                        
                        .grade{
                            color: #ffb232;
                            font-size: 14px;
                        }
                    }
                }
            }
            .mybtn{
                position: absolute;
                top:50%;
                right:15px;
                transform: translateY(-50%);
                line-height: 25px;
                height: 25px;
                width: 50px;
                color: #ff5f16;
                font-size: 13px;
                text-align: center;
                border-radius: 2px;
                border:1px solid #ff5f16;
            }
            .yugou{
                color: #ffb232;
                border:1px solid #ffb232;
            }
        }
    }
}
</style>